<template>
  <div>
    <!-- 办结事务 -->
    <div v-show="showList">
      <el-form size="small" :inline="true">
        <!-- <el-form-item label="开始时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.beginDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="开始时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.beginDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="申请人">
          <el-input v-model="queryParams.assigneeName" placeholder="请输入" style="width:200px;"></el-input>
        </el-form-item> -->
        <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
          @click="doneList">查询</el-button>
        <el-button size="small" plain class="reset_button" type="info" icon="el-icon-refresh"
          @click="reset">重置</el-button>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%;margin-top:10px" border size="medium">
        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
        <!-- <el-table-column prop="" label="#" align="center" width="55"></el-table-column> -->
        <el-table-column prop="processDefinitionName" label="流程名称" align="center"></el-table-column>
        <!-- <el-table-column prop="" label="当前步骤" align="center"></el-table-column> -->
        <!-- <el-table-column prop="processDefinitionVersion" label="流程版本" align="center"></el-table-column> -->
        <el-table-column prop="applyUserName" label="申请人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="handle" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="handleTask(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
        @size-change="handleSizeChange"></el-pagination>
    </div>


    <div v-show="showList == false">
      <el-form label-width="100px">

        <el-row type="flex" class="row-bg" justify="end">
          <el-form-item>
            <el-button @click="showList = true">关闭</el-button>
          </el-form-item>
        </el-row>


        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div slot="header" v-show="businessType == 1">
            <span style="font-weight: bold;font-size:18px;">入住流程步骤</span>
          </div>
          <div slot="header" v-show="businessType == 2">
            <span style="font-weight: bold;font-size:18px;">退宿流程步骤</span>
          </div>
          <div slot="header" v-show="businessType == 3">
            <span style="font-weight: bold;font-size:18px;">调寝流程步骤</span>
          </div>
          <el-steps :active="flowList.length - 1" v-show="businessType == 1">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
          <el-steps :active="flowList.length - 1" v-show="businessType == 2">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="原楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
          <el-steps :active="flowList.length - 1" v-show="businessType == 3">
            <el-step title="学生申请" icon="el-icon-video-play"></el-step>
            <el-step title="辅导员审批" icon="el-icon-video-play"></el-step>
            <el-step title="学院书记审批" icon="el-icon-video-play"></el-step>
            <el-step title="原楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="现楼长审批" icon="el-icon-video-play"></el-step>
            <el-step title="后勤办公室审批" icon="el-icon-video-play"></el-step>
            <el-step title="财务处审批" icon="el-icon-video-play"></el-step>
          </el-steps>
        </el-card>

        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">学生申请信息</span>
          </div>
          <div class="infoItem"><span id="colorTitle">姓名</span> {{ stu.name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              id="colorTitle">手机号</span> {{ stu.phone }}</div>
          <div class="infoItem"><span id="colorTitle">学号</span> {{ stu.num }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              id="colorTitle">学院</span> {{ stu.collegeName }}</div>
          <div class="infoItem"><span id="colorTitle">申请理由</span> {{ stu.reason }}</div>
          <div class="infoItem" v-if="oldInfo"><span id="colorTitle">原床位信息</span> {{ oldInfo.oldCampus }} {{
            oldInfo.oldBuild }} {{
    oldInfo.oldDorm
  }} {{ oldInfo.oldBed }} &nbsp;&nbsp;({{ oldInfo.num }})</div>
          <div class="infoItem" v-if="newInfo"><span id="colorTitle">新床位信息</span> {{ newInfo.newCampus }} {{
            newInfo.newBuild }} {{
    newInfo.newDorm
  }} {{ newInfo.newBed }} &nbsp;&nbsp;({{ newInfo.num }})</div>
        </el-card>

        <el-card shadow="hover">
          <div slot="header">
            <span style="font-weight: bold;font-size:18px;">流程信息</span>
          </div>
          <el-row type="flex" class="row-bg">
            <el-timeline>
              <el-timeline-item v-for="flow in flowList" :key="flow.id" :color="flow.endTime ? '#1890FF' : ''"
                :timestamp="flow.endTime" placement="top">
                <el-card shadow=" hover">
                  <p v-if="flow.historyActivityName == '开始'">流程开始</p>
                  <p v-if="flow.historyActivityName == '结束'">流程结束</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'"><span id="colorTitle">{{
                    flow.historyActivityName }}</span> {{ flow.assigneeName }}</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'">任务历时: {{
                    flow.historyActivityDurationTime }}</p>
                  <p v-if="flow.historyActivityName != '开始' && flow.historyActivityName != '结束'">批复意见: {{ flow.comment }}
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  doneList, //获取列表
} from '_api/MyBusiness/index.js'
import {
  modelView,
  getStuInfo
  // 查看流程
} from '_api/FlowManage/flowManage/index.js'
export default {
  data() {
    return {
      showList: true,
      flowList: "",
      // 查询参数
      queryParams: {
        current: 1,
        pageSize: 10,
        // beginDate: "",
        // endDate: "",
        // assigneeName: ""
      },
      tableData: [],
      total: 0,
      businessType: "",
      stu: {},
      oldInfo: {},
      newInfo: {}
    }
  },
  methods: {
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = (e - 1) * 10
      this.doneList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.doneList()

    },
    reset() {
      this.queryParams = {
        current: 1,
        pageSize: 10,
        beginDate: "",
        endDate: "",
        // assigneeName: ""
      }
      this.doneList()
    },
    // 处理事务
    handleTask(e) {
      if (e.processDefinitionName == '住宿申请流程') {
        this.businessType = 1
      }
      if (e.processDefinitionName == '退宿申请流程') {
        this.businessType = 2
      }
      if (e.processDefinitionName == '宿舍调整流程') {
        this.businessType = 3
      }
      this.formFinish = e
      // this.dialogHandle = true
      var query = { processInstanceId: e.processInstanceId }
      modelView(query).then(res => {
        this.xmlString = res.data.data.xml
        var flows = []
        res.data.data.flow.forEach(item => {
          flows.unshift(item)
        })
        flows.forEach(item => {
          if (item.endTime) {
            var date = new Date(item.endTime);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            item.endTime = Y + M + D + h + m + s;
          }
        })
        this.flowList = flows
        this.isSelectBed = res.data.data.isSelectBed
        this.showList = false
      })
      getStuInfo({
        pid: e.processInstanceId,
        type: this.businessType
      }).then(res => {
        this.stu = res.data.data.stu
        this.oldInfo = res.data.data.oldInfo
        this.newInfo = res.data.data.newInfo
      })
    },
    doneList() {
      doneList(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    }
  },
  created() {
    this.doneList()
  },
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}

#colorTitle {
  color: #ffffff;
  background-color: rgb(233, 182, 44);
  padding: 2px 6px;
  border-radius: 4px;
}

.infoItem {
  margin-top: 10px;
}
</style>
